import React, {
    // useRef,
    useReducer,
    useCallback
} from 'react';
import './index.css';
import Header from './Header';
import Content from './Content';



export const TodoContext = React.createContext();

const Todo2 = () => {
    // const childRef = useRef();
/*    const handleClick = () => {
        childRef.current.changeVal();
    }*/

    const reducer = useCallback((state,active)=>{
        console.log(state);
        switch (active.type) {
            case 'Add':{
                console.log(state.todoList);
                console.log()
                const todoList = [{
                    value:active.payload,
                    id:(Math.random()*10000).toFixed(0),
                    status:true
                },...state.todoList]
                return{
                    ...state,
                    todoList
                }
            }
            case 'Delete':{
                const todoList = state.todoList.filter(e=> active.id !== e.id);
                return {
                    ...state,
                    todoList
                }
            }
            default:{
                return {
                    ...state
                };
            }
        }
    },[]);

    const [state,dispath] = useReducer(reducer,{todoList:[]});

    return (
        <>
            <TodoContext.Provider value={{
                state,
                dispath
            }}>

                <div className={'box'}>
                    <Header />{/*ref={childRef}*/}
                    <Content todoList={state.todoList}/>
                    {/*<button onClick={handleClick}>666</button>*/}
                </div>
            </TodoContext.Provider>
        </>
    )
}

export default Todo2;